import React from 'react'

const Email = () => {
    // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 初始化表单对象
    const [form] = React.$Vant.Form.useForm()

    // 定义状态
    const [LoginAuth,setLoginAuth] = React.useState(React.$LoginAuth)
    const [show,setShow] = React.useState(false)

    // 提交验证
    const onEmail = () => {

    }

    // 倒计时结束后的操作
    const onCountDown = () => {
        setShow(false)
    }

    // 发送验证码
    const onSend = async () => {

        setShow(true)

        // 组装数据
        let data = {
            id:LoginAuth.id,
            email:LoginAuth.email
        }

        let result = await React.$Api.send(data)

        if(result.code === 1)
        {
            React.$Vant.Toast({
                type:'success',
                message:result.msg,
            })
        }else{
            React.$Vant.Toast.fail(result.msg)
        }

        
    }

    // 子组件
    const Item = () => {
        if(show === true)
        {
            return (
                <>
                    <React.$Vant.CountDown time={ 60 * 1000} onFinish={onCountDown} format='ss'/>s
                </>
            )
        }else{
            return (
                <React.$Vant.Button size="small" type="primary" onClick={onSend}>发送</React.$Vant.Button>
            )
        }
    }

    // 提交按钮
    const FormFooter = () => {
        return (
            <div style={{ margin: '16px 16px 0' }}>
                <React.$Vant.Button round='true' nativeType="submit" type='primary' block='true'>
                    提交
                </React.$Vant.Button>
            </div>
        )
    }
    
    // 返回上一页
    const onBack = () => {
        navigate(-1)
    }

    return (
        <>
            <div className="my_kuang">
                {/* 导航 */}
                <React.$Vant.NavBar
                    title="邮箱认证"
                    leftText="返回"
                    onClickLeft={onBack}
                />

                {/* 显示头像 */}
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <img id="Dfgrg" style={{height:'1.1rem'}} src={LoginAuth.avatar_cdn} alt="" />
                        </div>
                    </div>
                </div>

                {/* 表单 */}
                <div className='email'>
                    <React.$Vant.Form
                        form={form}
                        onFinish={onEmail}
                        footer={
                            <FormFooter />
                        }
                        border
                        colon
                        labelAlign='right'
                    >
                        {/* 邮箱 */}
                        <React.$Vant.Form.Item
                            name='email'
                            label='邮箱'
                            labelWidth='55'
                            initialValue={LoginAuth.email || ''}
                        >
                            <React.$Vant.Input readOnly placeholder='请输入邮箱' />
                        </React.$Vant.Form.Item>

                        {/* 输入验证码 */}
                        <React.$Vant.Form.Item
                            name='code'
                            label='验证码'
                            labelWidth='55'
                        >
                            <React.$Vant.Input
                                placeholder='请输入验证码'
                                suffix={
                                    <Item />
                                }
                            />
                        </React.$Vant.Form.Item>
                    </React.$Vant.Form>
                </div>
            </div>
        </>
    )
}

export default Email